<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/jsp/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务代表统计</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/plugins/h+/css/plugins/webuploader/webuploader.css">
    <link href="${ctxStatic}/plugins/h+/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <style>
        .ml10 {
            margin-left: 15px;
        }
        .click{
            display: block;
            margin: 0 auto;
            height: auto;
        }
        .gray{
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 999;
            background-color: #000000;
            filter: alpha(opacity=90);
            -moz-opacity: 0.9;
            -khtml-opacity: 0.9;
            opacity: 0.9;
        }
        .bigger{
            position: fixed;
            width: 300px;
            height: auto;
            max-height: 80%;
            top: 30%;
            left: 50%;
            margin-left: -150px;
            z-index: 9999;
        }
        .textCenter{
            padding-top: 8px;
            text-align: center;
        }

    </style>

</head>

<body class="gray-bg" >
<div class="wrapper wrapper-content " id="ccbb">
    <div class="row">
        <div class="col-sm-12">
            <div class="toolbar">
                <div id="toolbar" class="text-right">
                    <button id="btn_add" class="btn btn-primary" onclick="excelBrandInfo();" style="margin-bottom:10px;"><i class="fa fa-file-excel-o"></i>&nbsp;导出</button>
                </div>
            </div>
            <span id="spancc" class="spancc"></span>
            <div class="row">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>搜索条件</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" style="border-bottom:1px solid #eee" >
                        <div class="row">
                            <div class="col-md-1 textCenter" >业务代表</div>
                            <div class="col-md-2 ">
                                <select class="form-control m-b" id="searchBizPerson" onchange="changeBizPerson(this.value)">
                                    <option selected value="-1">全部</option>
                                    <c:forEach items="${bizList}" var="obj" varStatus="id">
                                        <option value="${obj.code}">${obj.person_name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-md-1 textCenter">商 户</div>
                            <div class="col-md-3 ">
                                <select class="form-control m-b" id="searchBrandCode">
                                    <option selected value="-1">全部</option>
                                    <c:forEach items="${pbrandList}" var="obj" varStatus="id">
                                        <option value="${obj.brandCode}">${obj.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-md-2"><input placeholder="开始日期" id="searchStartdate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" ></div>
                            <div class="col-md-2"><input placeholder="结束日期" id="searchEnddate" class="form-control layer-date" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" ></div>
                            <div class="col-md-1"><button id="bizBrandSearch" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;查询</button></div>
                        </div>
                    </div>
                    <div class="ibox-content" >
                        <div class="row" style="margin-bottom: 6px;">
                            <div class="col-md-3 text-left" >发券笔数：<span id="t_giveCount">0</span></div>
                            <div class="col-md-3 text-left" >领券金额：<span id="t_getTotal">0.00</span></div>
                            <div class="col-md-3 text-left" >领券比：<span id="t_giveGetScale">20</span>%</div>
                            <div class="col-md-3 text-left" >会员量：<span id="t_memberCount">20</span></div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 text-left" >发券金额：<span id="t_giveTotal">0</span></div>
                            <div class="col-md-3 text-left" >服务费金额：<span id="t_serviceTotal">0</span></div>
                            <div class="col-md-3 text-left" >久零贝核销率：<span id="t_coinPayRate">20</span>%</div>
                            <div class="col-md-3 text-left" >POS机数量：<span id="t_posCount">20</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <table id="exampleTablePagination"></table>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>发券统计</h5>

                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" id="fqtb_bz" class="btn btn-xs btn-white active" onclick="loadChartIn(1);">本周</button>
                            <button type="button" id="fqtb_by" class="btn btn-xs btn-white" onclick="loadChartIn(2);" >本月</button>
                            <button type="button" id="fqtb_bj" class="btn btn-xs btn-white" onclick="loadChartIn(3);">本季</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会员增长</h5>

                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" id="fqtb_bz_member" class="btn btn-xs btn-white active" onclick="loadMemberCount(1);">本周</button>
                            <button type="button" id="fqtb_by_member" class="btn btn-xs btn-white" onclick="loadMemberCount(2);" >本月</button>
                            <button type="button" id="fqtb_bj_member" class="btn btn-xs btn-white" onclick="loadMemberCount(3);">本季</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart-member"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>POS机增长</h5>

                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" id="fqtb_bz_pos" class="btn btn-xs btn-white active" onclick="loadPosCount(1);">本周</button>
                            <button type="button" id="fqtb_by_pos" class="btn btn-xs btn-white" onclick="loadPosCount(2);" >本月</button>
                            <button type="button" id="fqtb_bj_pos" class="btn btn-xs btn-white" onclick="loadPosCount(3);">本季</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart-POS"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/h+/js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/bootstrap-table.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/editable/bootstrap-table-editable.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/layer/laydate/laydate.js"></script>
<script>

</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script type="text/javascript">
    var brandString = eval('${brandString}');
    //初始化表格对象
    var $table = $('#exampleTablePagination');
    loadTotalSta();
    loadChartIn(1);
    loadMemberCount(1);
    loadPosCount(1);

    ////////////////////////////////////////////////////////////////////////////////////////以下是通过js方式初始化BootStrapTable/////////////////////////////////////////////
    $table.bootstrapTable({
        url: "${pageContext.request.contextPath}/bizperson/personStatistics.ac",
        method: 'post',
        contentType: "application/x-www-form-urlencoded",//必须的
        dataType: "json",
        pageList:[10, 20, 50, 100],//会根据当前的数据量加载合适的pageList
        height: ($(window).height()) ,
        pagination: true, //分页
        singleSelect: false,
        cache:false,
        sortName:"brandName",
        search: false, //显示搜索框
        showColumns:false,
        showRefresh:false,
        showToggle:false,
        showPaginationSwitch:false,
        smartDisplay:true,
        sortable: true,
        detailView:false,
        toolbar:"#toolbar",
        queryParams: queryParams,//参数
        searchOnEnterKey:true,
        detailFormatter:function(index, row, element){
            return row.notes;
        },
        sidePagination: "server", //服务端处理分页
        columns: [
            {
                visible:false,
                field:'id'
            },
            {
                title: '商户',
                field: 'brandName',
                align: 'center'
            },
            {
                title: '发券笔数',
                field: 'giveCount',
                align: 'center'
            },
            {
                title: '发券金额',
                field: 'giveTotal',
                align: 'center'
            },
            {
                title: '服务费金额',
                field: 'serviceTotal',
                align: 'center',
                sortable:true
            },
            {
                title: '服务费率',
                field: 'serviceRate',
                align: 'center',
                sortable:true,
                formatter:function(value) {
                    return parseFloat(value*100).toFixed(2)+"%";
                }
            },
            {
                title: '领券比率',
                field: 'giveGetScale',
                align: 'center',
                formatter:function(value) {
                    return parseFloat(value*100).toFixed(2)+"%";
                }
            },
            {
                title: 'POS机数量',
                field: 'posCount',
                align: 'center'
            }
        ]
    });

    /*
     搜索按钮
     */
    $("#bizBrandSearch").click(function(){
        $table.bootstrapTable('selectPage', 1);
        $table.bootstrapTable('refresh', queryParams);
        loadTotalSta();

        loadChartIn(1);
        loadMemberCount(1);
        loadPosCount(1);
    });

    function changeBizPerson(id)
    {
        var content = '<option selected value="-1">全部</option>';
        for (var i = 0; i < brandString.length; i++) {
            if(id!=-1) {
                if (brandString[i].bizCode == id) {
                    content += '<option value="' + brandString[i].brandCode + '">'
                            + brandString[i].name + '</option>';
                }
            }else{
                content += '<option value="' + brandString[i].brandCode + '">'
                        + brandString[i].name + '</option>';
            }
        }
        $("#searchBrandCode").html(content);
    }


    /*
     传递的参数
     */
    function queryParams(params) {
        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,  //页面大小
            offset: params.offset, //页码
            pageindex:params.pageNumber,
            brandCode: $("#searchBrandCode").val(),
            bizCode: $("#searchBizPerson").val(),
            startTime:$("#searchStartdate").val(),
            endTime:$("#searchEnddate").val(),
            sortName:this.sortName,
            sortOrder:this.sortOrder,
        };
        return temp;
    }

    function packageParams()
    {
        var params = {};
        params['startTime'] = $("#searchStartdate").val();
        params['endTime'] = $("#searchEnddate").val();
        params['brandCode'] = $("#searchBrandCode").val();
        params['bizCode'] = $("#searchBizPerson").val();
        var str = JSON.stringify(params);
        return str;
    }


    //获取发券增长
    function  loadChartIn(type) {
        var str = packageParams();
        //样式变更
        $("#fqtb_bz").removeClass("active");
        $("#fqtb_by").removeClass("active");
        $("#fqtb_bj").removeClass("active");

        if(type==1)
        { $("#fqtb_bz").addClass("active");}
        else  if(type==2)
        { $("#fqtb_by").addClass("active");}
        else  if(type==3)
        { $("#fqtb_bj").addClass("active");}
        //加载数据
        $.ajax( {
            url:'${pageContext.request.contextPath}/bizperson/loadCouponSum.ac',
            data:{type:type,json:str},
            type:'post',
            cache:false,
            dataType:'json',
            success:function(data) {
                var data3 = [];
                for(var i=0;i<data.list.length;i++)
                {
                    var da=[];

                    da.push(data.list[i].date)//data.list[i].date;//gd(2012, 1, i);//
                    da.push(data.list[i].count);
                    data3.push(da);
                }
                var dataset = [ {
                    label: "发券增长",
                    data:data3,
                    yaxis: 1,
                    color: "#23c6c8",
                    lines: {lineWidth: 1, show: true, fill: true, fillColor: {colors: [{opacity: 0.2}, {opacity: 0.2}]}},
                    splines: {show: false, tension: 0.6, lineWidth: 1, fill: 0.1}
                }];
                var options = {
                    xaxis: {
                        mode: "time",
                        tickSize: [data.size, "day"],
                        tickLength: 0,
                        axisLabel: "Date",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: "Arial",
                        axisLabelPadding: 10,
                        color: "#838383"
                    },
                    yaxes: [{
                        position: "left",
                        max: data.maxcount,
                        color: "#838383",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: "Arial",
                        axisLabelPadding: 3
                    }, {
                        position: "right",
                        clolor: "#838383",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: " Arial",
                        axisLabelPadding: 67
                    }],
                    legend: {noColumns: 1, labelBoxBorderColor: "#000000", position: "nw"},
                    grid: {hoverable: false, borderWidth: 0, color: "#838383"}
                };
                $.plot($("#flot-dashboard-chart"), dataset, options);

            },
            error : function() {
                alert("加载统计数据失败！");
            }
        });
    }

    function loadTotalSta()
    {
        var str = packageParams();
        $.ajax({
            url:'${pageContext.request.contextPath}/bizperson/personStatisticsTotal.ac?json='+str,
            type:'post',
            dataType:'json',
            success:function (data) {
                $("#t_giveCount").html(data.giveCount);
                $("#t_getTotal").html(data.getTotal);
                $("#t_giveGetScale").html((parseFloat(data.giveGetScale) * 100).toFixed(2));
                $("#t_memberCount").html(data.memberCount);
                $("#t_serviceTotal").html(data.serviceTotal);
                $("#t_coinPayRate").html((parseFloat(data.coinPayRate) * 100).toFixed(2));
                $("#t_giveTotal").html(data.giveTotal);
                $("#t_posCount").html(data.posCount);
            }
        });
    }


    //获取会员量图表
    function  loadMemberCount(type) {
        var str = packageParams();
        //样式变更
        $("#fqtb_bz_member").removeClass("active");
        $("#fqtb_by_member").removeClass("active");
        $("#fqtb_bj_member").removeClass("active");

        if(type==1)
        { $("#fqtb_bz_member").addClass("active");}
        else  if(type==2)
        { $("#fqtb_by_member").addClass("active");}
        else  if(type==3)
        { $("#fqtb_bj_member").addClass("active");}
        //加载数据
        $.ajax( {
            url:'${pageContext.request.contextPath}/bizperson/loadMemberSum.ac',
            data:{type:type,json:str},
            type:'post',
            cache:false,
            dataType:'json',
            success:function(data) {
                var data3 = [];
                for(var i=0;i<data.list.length;i++)
                {
                    var da=[];

                    da.push(data.list[i].date)//data.list[i].date;//gd(2012, 1, i);//
                    da.push(data.list[i].count);
                    data3.push(da);
                }
                var dataset = [ {
                    label: "会员增长率",
                    data:data3,
                    yaxis: 1,
                    color: "#23c6c8",
                    lines: {lineWidth: 1, show: true, fill: true, fillColor: {colors: [{opacity: 0.2}, {opacity: 0.2}]}},
                    splines: {show: false, tension: 0.6, lineWidth: 1, fill: 0.1}
                }];
                var options = {
                    xaxis: {
                        mode: "time",
                        tickSize: [data.size, "day"],
                        tickLength: 0,
                        axisLabel: "Date",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: "Arial",
                        axisLabelPadding: 10,
                        color: "#838383"
                    },
                    yaxes: [{
                        position: "left",
                        max: data.maxcount,
                        color: "#838383",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: "Arial",
                        axisLabelPadding: 3
                    }, {
                        position: "right",
                        clolor: "#838383",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: " Arial",
                        axisLabelPadding: 67
                    }],
                    legend: {noColumns: 1, labelBoxBorderColor: "#000000", position: "nw"},
                    grid: {hoverable: false, borderWidth: 0, color: "#838383"}
                };
                $.plot($("#flot-dashboard-chart-member"), dataset, options);

            },
            error : function() {
                alert("加载统计数据失败！");
            }
        });
    }



    //获取POS机增长
    function  loadPosCount(type) {
        var str = packageParams();
        //样式变更
        $("#fqtb_bz_pos").removeClass("active");
        $("#fqtb_by_pos").removeClass("active");
        $("#fqtb_bj_pos").removeClass("active");

        if(type==1)
        { $("#fqtb_bz_pos").addClass("active");}
        else  if(type==2)
        { $("#fqtb_by_pos").addClass("active");}
        else  if(type==3)
        { $("#fqtb_bj_pos").addClass("active");}
        //加载数据
        $.ajax( {
            url:'${pageContext.request.contextPath}/bizperson/loadPosSum.ac',
            data:{type:type,json:str},
            type:'post',
            cache:false,
            dataType:'json',
            success:function(data) {
                var data3 = [];
                for(var i=0;i<data.list.length;i++)
                {
                    var da=[];

                    da.push(data.list[i].date)//data.list[i].date;//gd(2012, 1, i);//
                    da.push(data.list[i].count);
                    data3.push(da);
                }
                var dataset = [ {
                    label: "POS机增长率",
                    data:data3,
                    yaxis: 1,
                    color: "#23c6c8",
                    lines: {lineWidth: 1, show: true, fill: true, fillColor: {colors: [{opacity: 0.2}, {opacity: 0.2}]}},
                    splines: {show: false, tension: 0.6, lineWidth: 1, fill: 0.1}
                }];
                var options = {
                    xaxis: {
                        mode: "time",
                        tickSize: [data.size, "day"],
                        tickLength: 0,
                        axisLabel: "Date",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: "Arial",
                        axisLabelPadding: 10,
                        color: "#838383"
                    },
                    yaxes: [{
                        position: "left",
                        max: data.maxcount,
                        color: "#838383",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: "Arial",
                        axisLabelPadding: 3
                    }, {
                        position: "right",
                        clolor: "#838383",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: " Arial",
                        axisLabelPadding: 67
                    }],
                    legend: {noColumns: 1, labelBoxBorderColor: "#000000", position: "nw"},
                    grid: {hoverable: false, borderWidth: 0, color: "#838383"}
                };
                $.plot($("#flot-dashboard-chart-POS"), dataset, options);
            },
            error : function() {
                alert("加载统计数据失败！");
            }
        });
    }


    function excelBrandInfo() {
        var str = packageParams();
        window.location.href = "${pageContext.request.contextPath}/bizperson/excelBrandInfo.ac?parameters="
                + str;
    }




</script>
</body>


</html>
